﻿@{
    ViewBag.Title = "TabStrip : Add and Remove Tabs";
}

<h2>TabStrip : Add and Remove Tabs</h2>

<h3>Sample</h3>

@{
    Html.Telerik().TabStrip()
        .Name("SampleTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .Selected(true)
                .Content(
                    @<text>
                    <p>Content for the first tab.</p>
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 2")
                .Content(
                    @<text>
                    <p>Content for the second tab.</p>
                    </text>
                );
        })
        .Render();
}

<br />

<div style="height:100px; width:100%;">
    <fieldset style="width:400px; float:left; margin-right:10px;"><legend>Add Tab</legend>
        <br />
        New Tab Name: @Html.TextBox("newTabName")
        <button onclick="addTab()">Add</button>
    </fieldset>

    <fieldset style="width:400px; float:left;"><legend>Remove Tab by Text</legend>
        <br />
        Tab to Remove: <select id="tabList"><option value="Tab 1">Tab 1</option><option value="Tab 2">Tab 2</option></select>
        <button onclick="removeTabByText()">Remove</button>
    </fieldset>

    <fieldset style="width:400px; float:left;"><legend>Remove Tab by Index</legend>
        <br />
        Tab to Remove: <select id="tabListByIndex"><option value="0">Tab 1</option><option value="1">Tab 2</option></select>
        <button onclick="removeTabByIndex()">Remove</button>
    </fieldset>
</div>

<h3>Documentation</h3>
<p>
When a tab is added, a jQuery.ajax() call is made to get a partial view to display as the contents for the new tab.
The HTML that is brought back from the server for the partial view is passed to the addTab() function.  The addTab()
function takes 2 parameters:
<ul>
    <li>text: text for the tab.</li>
    <li>html: html for the tab content.</li>
</ul>
</p>
<p>
Here is the code that gets the partial view, adds the tab and adds the tab name to the dropdownlist of tabs:
</p>
<pre class="code">
var tabName = $('#newTabName').val();

$.ajax({
    url: '/TabStrip/GetTabContent',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html',
    data: { tabName: tabName }
})
.success(function(result) {
    var tabStrip = $('#SampleTabStrip').data('tTabStrip');
    tabStrip.addTab({ text: tabName, html: result });
    tabStrip.selectTab({ text: tabName });
    $('#tabList').append($('<option></option>').val(tabName).html(tabName));
});
</pre>

<p>
When the tab is removed, the removeTab() function is called to remove the tab.  The removeTab() function
takes a json object as the parameter where one of the 2 attributes must be set.  The attributes are:
<ul>
    <li>text: the current text for the tab.</li>
    <li>index: zero based index for the tab.</li>
</ul>
</p>
<p>
Here is the code that removes the tab and removes the tab name from the dropdownlist of tabs:
</p>
<pre class="code">
var tabName = $('#tabList option:selected').val();
var tabStrip = $('#SampleTabStrip').data('tTabStrip');
tabStrip.removeTab({ text: tabName });
if (tabStrip.getTab({ text: tabName }).length == 0) {
    $('#tabList option:selected').remove();
}
</pre>

<script type="text/javascript">
    closeTab=function (idx) {
        $('#SampleTabStrip').data('tTabStrip').removeTab({ index: idx });
    }

    addTab=function () {
        var tabName=$('#newTabName').val();

        if(tabName.length>0) {
            $.ajax({
                url: '/TabStrip/GetTabContent',
                contentType: 'application/html; charset=utf-8',
                type: 'GET',
                dataType: 'html',
                data: { tabName: tabName }
            })
            .success(function (result) {
                var tabStrip=$('#SampleTabStrip').data('tTabStrip');
                tabStrip.addTab({ text: tabName,html: result });
                tabStrip.selectTab({ text: tabName });
                $('#tabList').append($('<option></option>').val(tabName).html(tabName));
                //var tab=tabStrip.getTab({ text: tabName });
                //$(tab).append("<a class='tce-tab-close' onclick=\"closeTab("+tabStrip.getTabIndex(tabName)+");\" />");
            });
        }
        else {
            alert('Enter the text for the new tab');
        }
    }
    removeTabByText=function () {
        var tabName=$('#tabList option:selected').val();
        var tabStrip=$('#SampleTabStrip').data('tTabStrip');
        tabStrip.removeTab({ text: tabName });
        if(tabStrip.getTab({ text: tabName }).length==0) {
            $('#tabList option:selected').remove();
        }
    }

    removeTabByIndex=function () {
        var tabIndex=$('#tabListByIndex option:selected').val();
        var tabStrip=$('#SampleTabStrip').data('tTabStrip');
        tabStrip.removeTab({ index: tabIndex });
        if(tabStrip.getTab({ index: tabIndex }).length==0) {
            $('#tabListByIndex option:selected').remove();
        }
    }
</script>
